<template>
  <div class="PostListView">
    <a-space
      :direction="'horizontal'"
      style="margin-top: 6vh"
      :align="'center'"
      fill
      :size="'mini'"
    >
      <a-row
        style="min-width: 80vw; background-color: #ffffff; margin-left: 9vw"
        :justify="'center'"
      >
        <a-col :span="7">
          <UserCard />
        </a-col>
        <a-col :span="16" style="margin-left: 0">
          <a-tabs
            style="background-color: #ffffff"
            :size="'large'"
            :type="'card-gutter'"
          >
            <template #extra>
              <a-button :size="'large'" @click="addPost" type="primary"
                >+新建帖子</a-button
              >
            </template>
            <a-tab-pane key="1">
              <template #title>
                <div @click="loads()"><icon-calendar-clock /> 全部帖子</div>
              </template>
              <a-list
                :size="'large'"
                :max-height="560"
                :hoverable="true"
                :pagination-props="{
                  current: postValue.current,
                  pageSize: postValue.pageSize,
                  showTotal: true,
                  total,
                }"
                @page-change="changePage"
              >
                <a-list-item
                  v-for="post in postList"
                  :key="post.id"
                  action-layout="vertical"
                  @click="goPost(post.id)"
                >
                  <template #actions>
                    <span><icon-heart />{{ post?.favourNum }}</span>
                    <span><icon-star />{{ post?.thumbNum }}</span>
                    <span style="color: #bbbbbb"
                      ><icon-clock-circle />创作时间：{{
                        moment(post?.createTime).format("yyyy-MM-DD: HH:mm:ss")
                      }}</span
                    >
                  </template>
                  <template #extra>
                    <div style="width: 10vw">
                      <a-space :direction="'horizontal'" fill>
                        <div style="width: 4vw" @click.stop>
                          <a-col :span="12" @click="updatePost(post.id)"
                            ><icon-edit class="operatorIcon"
                          /></a-col>
                        </div>
                        <div @click.stop>
                          <a-col :span="12" @click="deletPost(post.id)"
                            ><icon-delete class="operatorIcon"
                          /></a-col>
                        </div>
                      </a-space>
                    </div>
                  </template>
                  <a-list-item-meta
                    :title="post.title"
                    :description="'作者：' + post.userAccount"
                  >
                    <template #avatar>
                      <div class="image-area">
                        <img alt="arco-design" :src="post.imgUrl" />
                      </div>
                    </template>
                  </a-list-item-meta>
                </a-list-item>
              </a-list>
            </a-tab-pane>
            <a-tab-pane key="2">
              <template #title>
                <div @click="myPost()"><icon-clock-circle /> 我的帖子</div>
              </template>
              <a-list
                :size="'large'"
                :max-height="560"
                :hoverable="true"
                :pagination-props="{
                  current: postValue.current,
                  pageSize: postValue.pageSize,
                  showTotal: true,
                  total,
                }"
                @page-change="changePage"
              >
                <a-list-item
                  v-for="post in postList"
                  :key="post.id"
                  action-layout="vertical"
                  @click="goPost(post.id)"
                >
                  <template #actions>
                    <span><icon-heart />{{ post?.favourNum }}</span>
                    <span><icon-star />{{ post?.thumbNum }}</span>
                    <span style="color: #bbbbbb"
                      ><icon-clock-circle />创作时间：{{
                        moment(post?.createTime).format("yyyy-MM-DD: HH:mm:ss")
                      }}</span
                    >
                  </template>
                  <template #extra>
                    <div
                      style="width: 10vw"
                      v-if="
                        store.state.user.loginUser.userRole === 'admin' ||
                        store.state.user.loginUser.userAccount ===
                          post.userAccount
                      "
                    >
                      <a-space :direction="'horizontal'" fill>
                        <div style="width: 4vw" @click.stop>
                          <a-col :span="12" @click="updatePost(post.id)"
                            ><icon-edit class="operatorIcon"
                          /></a-col>
                        </div>
                        <div @click.stop>
                          <a-col :span="12" @click="deletPost(post.id)"
                            ><icon-delete class="operatorIcon"
                          /></a-col>
                        </div>
                      </a-space>
                    </div>
                  </template>
                  <a-list-item-meta
                    :title="post.title"
                    :description="'作者：' + post.userAccount"
                  >
                    <template #avatar>
                      <div class="image-area">
                        <img alt="arco-design" :src="post.imgUrl" />
                      </div>
                    </template>
                  </a-list-item-meta>
                </a-list-item>
              </a-list>
            </a-tab-pane>
          </a-tabs>
        </a-col>
      </a-row>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import { useStore } from "vuex";
import { onMounted, reactive, ref } from "vue";
import UserCard from "@/components/UserCard.vue";
import { useRouter } from "vue-router";
import { PostControllerService, PostQueryRequest } from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import moment from "moment";
import accessEnum from "@/access/accessEnum";

const store = useStore();
const router = useRouter();
let user = ref({
  userAccount: "未登录",
  userAvatar: "" || null,
  userProfile: "oj",
});
// 列表
const postValue = ref({
  current: 1,
  pageSize: 5,
} as PostQueryRequest);

const total = ref();

onMounted(() => {
  user.value = store.state.user.loginUser;
  loads();
});
const postList = ref([]);
const loads = async () => {
  const res = await PostControllerService.listPostVoByPageUsingPost({
    ...postValue.value,
  });
  if (res.code === 0) {
    console.log(res);
    message.success("获取信息成功");
    postList.value = reactive(res.data.records);
    postList.value.forEach((item) => {
      item.userAccount = item.user.userAccount;
    });
    total.value = res.data.total;
  } else {
    message.error("获取信息失败" + res.message);
  }
};

const changePage = (current: number) => {
  postValue.value = {
    ...postValue.value,
    current,
  };
  loads();
};

const addPost = () => {
  router.push({
    path: "/post/add/view/",
  });
};

const updatePost = (postId: string) => {
  router.push({
    path: `/post/update/view/${postId}`,
  });
};

const myPost = async () => {
  const res = await PostControllerService.listMyPostVoByPageUsingPost(
    postValue.value
  );
  if (res.code === 0) {
    message.success("获取信息成功");
    postList.value = reactive(res.data.records);
    postList.value.forEach((item) => {
      item.userAccount = item.user.userAccount;
    });
    total.value = res.data.total;
  } else {
    message.error("操作失败" + res.message);
  }
};

const goPost = (postId: string) => {
  router.push({
    path: `/post/view/${postId}`,
  });
};
const deletPost = async (postId: number) => {
  const res = await PostControllerService.deletePostUsingPost({
    id: postId,
  });
  if (res.code === 0) {
    message.success("删除成功");
    postList.value = postList.value.filter((item) => {
      if (item.id === postId) return false;
      return true;
    });
  } else {
    message.error("操作失败" + res.message);
  }
};
</script>
<style scoped>
.icon-hover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: all 0.1s;
}
.icon-hover:hover {
  background-color: rgb(var(--gray-2));
}

.image-area {
  width: 100px;
  height: auto;
  border-radius: 2px;
  overflow: hidden;
}
.image-area img {
  width: 100%;
  height: auto;
}
.operatorIcon:hover {
  cursor: pointer;
  background-color: #bbbbbb;
}
.operatorIcon {
  font-size: 1.5vw;
  min-font-size: 10px;
}
</style>
